import React from 'react'
import {connect} from 'dva'
import moment from 'moment'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import RightBox from "../../../components/commons/RightBox";
import RightContacts from "../../../utils/RightConstants";
const FormItem = Form.Item;
const Option = Select.Option;
const Dragger = Upload.Dragger;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const { TextArea } = Input;

const release = "release";
const view = "view";

const Deposit = ({routes, params, children, location, dispatch, deposit}) => {

    const {page, search, list, editModel} = deposit;

    let onEdit = (record, type) => {
        let step = "";
        let title = "";

        if (type == release) {
            step = 1;
            title: '保证金释放';
        }  else if (type == view) {
            step = 2;
            title = '查看';
        }


        dispatch({
            type: 'deposit/getDepositById',
            payload: {
                id: record.id,
                type: type,
                step: step,

            }
        })
    }


    const columns = [ {
        title: '客户代码',
        dataIndex: 'customerno',
        key: 'customerno',
        width: '120px'
    }, {
        title: '客户名称',
        dataIndex: 'companyname',
        key: 'companyname',
        width: '200px'
    }, {
        title: '外汇单号',
        dataIndex: 'forexid',
        key: 'forexid',
    }, {
        title: '保证金号',
        dataIndex: 'depositno',
        key: 'depositno',
        width: '150px'
    },{
        title: '保证金金额',
        dataIndex: 'amount',
        key: 'amount',
        width: '150px'
    },{
        title: '待释放金额',
        dataIndex: 'unpayamount',
        key: 'unpayamount',
        width: '100px'
    }, {
        title: '操作',
        width: '150px',
        render(record) {

            let releaseButton=
                <RightBox resource={RightContacts.CAPITAL.CAPITAL_PAY_RELEASE}>
                <span>
                       <a href="#" onClick={() => onEdit(record, release)}>释放保证金</a>
                    </span>
                </RightBox>;

            if(search.status == 0){
                return (
                    releaseButton
                );
            }else if(search.status == 1){
                return (
                    <span>
                        <a href="#" onClick={() => onEdit(record, view)}>查看</a>
                    </span>
                );
            }


        }
    }];

    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 18}
    };

    const SearchForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;

        const handleSearch = function () {
            validateFields((errors, values) => {
                if (errors) {
                    return
                }

                dispatch({
                    type: 'deposit/setSearch', payload: {
                        search: {
                            time: values.time,
                            cstId: values.cstId,
                            depositNo: values.depositNo,
                            status: values.status,
                            beginTime: "",
                            endTime: "",

                        }
                    }
                });
                let newPage = page;
                newPage.page = 1;
                dispatch({
                    type: 'deposit/setPage', payload: {
                        page: newPage
                    }
                });
                dispatch({type: 'deposit/getDepositsList'});
            });
        }

        return (
            <div>
                <div>
                    <Row>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'客户代码'}>
                                {getFieldDecorator('cstId', {initialValue: search.cstId})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'保证金号'}>
                                {getFieldDecorator('depositNo', {initialValue: search.depositNo})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>

                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'收汇时间'}>
                                {getFieldDecorator('time', {initialValue:
                                    [ search.beginTime == '' ? '' : moment(search.beginTime, dateFormat), search.endTime == '' ? '' :moment(search.endTime, dateFormat)]})(
                                    <RangePicker
                                        style={{width: 230}}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder={['开始时间', '结束时间']}
                                    />
                                )}
                            </FormItem>
                        </Col>
                        {/*<Col span={6}>*/}
                        {/*<FormItem {...formItemLayout} label={'客户名称'}>*/}
                        {/*{getFieldDecorator('orderno', {initialValue: search.orderno})(*/}
                        {/*<Input style={{width: 200}}/>*/}
                        {/*)}*/}
                        {/*</FormItem>*/}
                        {/*</Col>*/}
                        <Col span={2} style={{textAlign: 'right'}}>
                            <Button type="primary" icon="search" style={{marginRight: 5}} onClick={handleSearch} >查询</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={7}>
                            <FormItem
                                {...formItemLayout}
                                label={'状态'}
                            >
                                {getFieldDecorator('status', {
                                    initialValue: search.status == '' ? '0' : search.status
                                })(
                                    <RadioGroup style={{width: 800}}>
                                        <Radio value='0'>待释放</Radio>
                                        <Radio value='1'>已释放</Radio>
                                    </RadioGroup>
                                )}
                            </FormItem>
                        </Col>

                    </Row>
                </div>
            </div>
        );
    });

    return (
        <div>
            <ReleaseDeposit visible={editModel.showStatus} editModel={editModel} title={editModel.title}
                            confirmLoading={editModel.confirmLoading} dispatch={dispatch} />
            <SearchForm/>

            <Table dataSource={list} columns={columns} bordered={false} size={'middle'} scroll={{y: 500}} pagination={{
                showTotal: total => `共 ${total} 条数据`,
                pageSize: page.size,
                total: page.totalRow,
                showSizeChanger: true,
                onShowSizeChange: (current, size) => {
                    let newPage = page;
                    newPage.size = size;
                    newPage.page = 1;
                    dispatch({
                        type: 'deposit/setPage', payload: {
                            page: newPage
                        }
                    });
                    dispatch({type: 'deposit/getDepositsList'});
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = page;
                    newPage.page = pageNumber;
                    dispatch({
                        type: 'deposit/setPage', payload: {
                            page: newPage
                        }
                    });
                    dispatch({type: 'deposit/getDepositsList'});

                }
            }}/>
        </div>

    );
}


/**
 * 保证金释放
 *
 * @returns {XML}
 */
const ReleaseDeposit = ({visible, title, editModel, dispatch, confirmLoading, deposit}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        },
    };

    let xform = editModel.form;

    const WrappedForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;

        const releaseDeposit = function () {
            validateFields((errors, values) => {
                if (errors) {
                    return
                }

                dispatch({
                    type: 'deposit/release', payload: {
                        depositid: xform.id,
                        depositno: xform.depositno,
                        amount: values.amount,
                        memo: values.memo,
                        type : release,
                    }
                });

            });
        }

        return (

            <Modal visible={visible} title={title} width={editModel.width} wrapClassName="vertical-center-modal" onCancel={
                () => {
                    dispatch({
                        type: 'deposit/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            } onOk={
                () => {
                    dispatch({
                        type: 'deposit/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            }>

                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="保证金单号"
                            hasFeedback
                        >

                            <span>{xform.id}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="费用申报时间"
                            hasFeedback
                        >

                            <span >{xform.createtime}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="客户ID"
                            hasFeedback
                        >
                            <span>{xform.cstid}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="客户名称"
                            hasFeedback
                        >

                            <span>{}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="保证金金额"
                            hasFeedback
                        >
                            <span>{xform.amount}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="待释放金额"
                            hasFeedback
                        >

                            <span>{xform.unpayamount}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="外汇金额"
                            hasFeedback
                        >

                            <span>{xform.fxamount}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="预收金额"
                            hasFeedback
                        >

                            <span>{xform.recamount}</span>

                        </FormItem>
                    </Col>
                </Row>

                {xform.type == release ?
                    <Form>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="释放金额"
                                    hasFeedback
                                >
                                    {getFieldDecorator('amount', {
                                        rules: [{
                                            required: true, message: '请输入金额！',
                                        }],
                                        initialValue: ''
                                    })(
                                        <Input style={{width: 230}}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="备注"
                                    hasFeedback
                                >
                                    {getFieldDecorator('memo', {
                                    })(

                                        <TextArea style={{width: 230}}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8} >
                                <Button type="primary" icon="add" style={{marginLeft: 10}} onClick={releaseDeposit}>新增</Button>
                            </Col>
                        </Row>

                    </Form>

                    :''}


                {ViewReleaseDepositRecord({xform})}
            </Modal>
        );
    });

    /**
     * 查看释放记录
     *
     * @returns {XML}
     */
    const ViewReleaseDepositRecord = ({xform}) => {

        const columns = [{
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width: '150px'
        }, {
            title: '释放金额',
            dataIndex: 'amount',
            key: 'amount',
            width: '150px'
        }, {
            title: '释放时间',
            dataIndex: 'createtime',
            key: 'createtime',
            width: '150px'
        }, {
            title: '操作人',
            dataIndex: 'creator',
            key: 'creator',
            width: '150px'
        }, {
            title: '状态',
            key: 'status',
            width: '150px',
            render(record){
                if(record.status == 1){
                    return "已释放";
                }else if(record.status == 0){
                    return "未释放";
                }else{
                    return "未知";
                }
            }
        },  {
            title: '备注',
            dataIndex: 'memo',
            key: 'memo'
        }];

        const list = [];

        let releasePage = editModel.releasePage;
        let releaselist = editModel.releaselist;

        return (
            <div>
                <Table dataSource={releaselist} columns={columns} bordered={false} size={'middle'} scroll={{y: 500}} pagination={{
                    showTotal: total => `共 ${total} 条数据`,
                    pageSize: releasePage.size,
                    current: releasePage.page,
                    total: releasePage.totalRow,
                    showSizeChanger: true,
                    onShowSizeChange: (current, size) => {
                        let newPage = releasePage;
                        newPage.size = size;
                        newPage.page = 1;
                        dispatch({
                            type: 'deposit/setReleasePage', payload: {
                                releasePage: newPage
                            }
                        });
                        dispatch(
                            {
                                type: 'deposit/getDepositById',
                                payload: {
                                    id: xform.id
                                }
                            }
                        );
                    },
                    onChange: (pageNumber, pageSize) => {

                        let newPage = releasePage;
                        newPage.page = pageNumber;
                        dispatch({
                            type: 'deposit/setReleasePage', payload: {
                                releasePage: newPage
                            }
                        });
                        dispatch(
                            {
                                type: 'deposit/getDepositById',
                                payload: {
                                    id: xform.id
                                }
                            }
                        );

                    }
                }}/>
            </div>
        );
    };

    return (
        <div>
            <WrappedForm/>
        </div>
    );
}



export default connect(({deposit}) => ({deposit}))(Deposit)